<template>
	<div>
		<uni-popup :show="commissionStatus" class="catalog" width="90%" maxHeight="80%" height="80%" ref="popups">
			<div class="commission-product">
				<div class="hd"><uni-icon color="#BC9963" size="40" type="closeempty" @click="close"></uni-icon></div>
				<div class="bd">
					<ul>
						<li v-for="(item, index) in list" :key="index">
							<radio class="radio" color="#d6ae80" :checked="item.status" @click="_checkList(item)"></radio>
							<img class="image" mode="widthFix" :src="item.goods_image" v-if="item.goods_image" />
							<img class="image" v-else :src="`${constant.imgUrl}casedetail/list_no_img.png`" alt="图片" />

							<div class="info">
								<div class="tit">{{ item.goods_name }}</div>
								<div class="price">
									<div class="sale">销售价¥{{ item.cost_price }}</div>
									<div class="make">
										赚¥
										<span class="val">{{ item.profit | toFix }}</span>
									</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div class="bg"><div class="btn" @click="batch"></div></div>
			</div>
		</uni-popup>
	</div>
</template>
<script>
import { getLibGoodsList, addLibGood } from '@/api/material'
import { getFormatDate } from '@/utils/common'
import uniPopup from '@/components/uni-popup/uni-popup'
import uniIcon from '@/components/uni-icon/uni-icon.vue'

export default {
	name: 'commissionProducts',
	components: {
		uniPopup,
		uniIcon
	},
	data() {
		return {
			constant: this.$constant,
			result: [],
			commissionStatus: false,
			list: '',
			checkList: []
		}
	},
	filters: {
		toFix(val) {
			return Number(val).toFixed(2)
		}
	},
	mounted() {
		let commissionDay = uni.getStorageSync('commissionDay')
		let currentDay = getFormatDate(new Date().getTime(), 'yyyy-MM-dd', true)
		if (!commissionDay || this.compareDate(currentDay, commissionDay)) {
			this._getLibGoodsList()
		} else {
			this.commissionStatus = false
		}
	},
	methods: {
		/* 高佣金产品 */
		_getLibGoodsList() {
			let params = {
				page: 1,
				limit: 20,
				order_by_sale: 2
			}
			getLibGoodsList(params).then(res => {
				if (res.status === 'success') {
					if (res.data.total < 10) {
						this.commissionStatus = false
					} else {
						let list = res.data.list
						for (let i in list) {
							list[i].status = true
							this.result.push(list[i].goods_lib_id)
						}
						this.list = list
						this.commissionStatus = true
					}
				} else {
					this.$toast(res.errors.message)
				}
			})
		},
		batch() {
			if (this.result.length) {
				let params = { status: 1, goods_lib_id_arr: this.result }
				addLibGood(params).then(res => {
					if (res.status === 'success') {
						this.$toast('上架成功')
						this.close()
					} else {
						this.$toast(res.errors.message)
					}
				})
			} else {
				this.$toast('请选择上架商品')
			}
		},
		close() {
			this.commissionStatus = false
			let currentDay = getFormatDate(new Date().getTime(), 'yyyy-MM-dd', true)
			uni.setStorageSync('commissionDay', currentDay)
		},
		compareDate(dTime1, dTime2) {
			let fDate1 = new Date(dTime1)
			let fDate2 = new Date(dTime2)
			return fDate1 > fDate2
		},
		checkboxChange(e) {
			this.result = e.detail.value
		},
		_checkList(item) {
			let result = this.result
			if (item.status) {
				result = result.filter(fItem => fItem != item.goods_lib_id)
				item.status = false
			} else {
				result.push(item.goods_lib_id)
				item.status = true
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.commission-product {
	position: relative;
	background: #fff;
	width: 670px;
	height: 100%;
	border-radius: 20px;
	.hd {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 120px;
		background-image: url($imgUrl+'material/commission_head_bg.png');
		background-size: 100%;
		background-repeat: no-repeat;
		uni-icon {
			position: absolute;
			top: 0;
			right: 0;
			font-size: 80px;
		}
	}
	.bd {
		position: absolute;
		top: 120px;
		left: 0;
		right: 0;
		bottom: 190px;
		overflow: hidden;
		ul {
			height: 100%;
			overflow: auto;
		}
		li {
			position: relative;
			margin: 0 0 40px 0;
			min-height: 120px;
			overflow: hidden;
			.radio {
				position: absolute;
				top: 40px;
				left: 21px;
				width: 40px;
				height: 40px;
			}
			.image {
				position: absolute;
				top: 0;
				left: 81px;
				width: 120px;
				height: 120px !important;
			}
			.info {
				margin-left: 221px;
				width: 410px;
				.tit {
					text-align: left;
					height: 64px;
					font-size: 26px;
					color: #333;
					line-height: 32px;
					overflow: hidden;
				}
				.price {
					height: 40px;
					line-height: 40px;
					border-radius: 20px;
					color: #e43636;
					font-size: 24px;
					text-align: center;
					border-radius: 20px;
					margin-top: 16px;
					overflow: hidden;
					.sale {
						float: left;
						width: 255px;
						background: #faefef;
					}
					.make {
						float: left;
						width: 155px;
						background: #e43636;
						color: #fff;
						.val {
							display: inline;
							font-size: 28px;
							font-weight: 800;
						}
					}
				}
			}
		}
	}
	.bg {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99;
		width: 100%;
		height: 222px;
		background-image: url($imgUrl+'material/commission_bottom_bg.png');
		background-size: 100%;
		background-repeat: no-repeat;
		.btn {
			width: 502px;
			height: 102px;
			margin: 58px auto 0;
			background-image: url($imgUrl+'material/commission_btn.png');
			background-size: 100%;
			background-repeat: no-repeat;
		}
	}
}
</style>
